<script lang="ts" setup>
import { ref } from 'vue';

import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';

import { Button, DatePicker, message, Table } from 'ant-design-vue';
import dayjs from 'dayjs';

// 页面标题
defineOptions({
  name: 'Depreciation',
});

// 响应式数据
const selectedDate = ref(dayjs('2025-01'));

// 表格列配置
const columns = [
  {
    title: '编码',
    dataIndex: 'code',
    key: 'code',
    width: 120,
    align: 'center' as const,
  },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    width: 200,
    align: 'left' as const,
  },
  {
    title: '开始使用日期',
    dataIndex: 'startDate',
    key: 'startDate',
    width: 150,
    align: 'center' as const,
  },
  {
    title: '类别',
    dataIndex: 'category',
    key: 'category',
    width: 120,
    align: 'center' as const,
  },
  {
    title: '使用部门',
    dataIndex: 'department',
    key: 'department',
    width: 150,
    align: 'center' as const,
  },
  {
    title: '使用情况',
    dataIndex: 'usage',
    key: 'usage',
    width: 120,
    align: 'center' as const,
  },
  {
    title: '折旧期限',
    dataIndex: 'depreciationPeriod',
    key: 'depreciationPeriod',
    width: 120,
    align: 'center' as const,
  },
];

// 模拟表格数据
const dataSource = ref([
  {
    key: '1',
    code: 'FA001',
    name: '办公电脑',
    startDate: '2024-01-15',
    category: '电子设备',
    department: '财务部',
    usage: '正常使用',
    depreciationPeriod: '36个月',
  },
  {
    key: '2',
    code: 'FA002',
    name: '办公桌椅',
    startDate: '2024-02-20',
    category: '办公家具',
    department: '行政部',
    usage: '正常使用',
    depreciationPeriod: '60个月',
  },
  {
    key: '3',
    code: 'FA003',
    name: '打印机',
    startDate: '2024-03-10',
    category: '电子设备',
    department: '财务部',
    usage: '正常使用',
    depreciationPeriod: '36个月',
  },
  {
    key: '4',
    code: 'FA004',
    name: '空调设备',
    startDate: '2024-04-05',
    category: '机械设备',
    department: '办公室',
    usage: '正常使用',
    depreciationPeriod: '120个月',
  },
  {
    key: '5',
    code: 'FA005',
    name: '服务器',
    startDate: '2024-05-12',
    category: '电子设备',
    department: 'IT部',
    usage: '正常使用',
    depreciationPeriod: '60个月',
  },
]);

// 事件处理函数
const handleDepreciation = () => {
  const dateStr = selectedDate.value.format('YYYY-MM');
  message.success(`开始计提 ${dateStr} 的折旧...`);
};

const handlePrint = () => {
  message.info('打印功能开发中...');
};

const handleExport = () => {
  message.info('导出功能开发中...');
};

const handleDateChange = (date: any) => {
  selectedDate.value = date;
};
</script>

<template>
  <Page auto-content-height>
    <!-- 页面头部 -->
    <div class="mb-6">
      <!-- 公司名称和面包屑 -->
      <div class="mb-4 flex items-center justify-between">
        <div class="flex items-center space-x-4">
          <h1 class="text-lg font-medium text-gray-900">
            北京神州源科技有限公司
          </h1>
          <div class="text-sm text-gray-500">
            <span>固定资产</span>
            <span class="mx-2">></span>
            <span class="text-blue-600">计提折旧</span>
          </div>
        </div>
      </div>

      <!-- 模拟标签页 -->
      <div class="mb-4 flex space-x-1 border-b border-gray-200">
        <div
          class="rounded-t-lg border-l border-r border-t border-blue-200 bg-blue-50 px-4 py-2 text-sm text-blue-600"
        >
          计提折旧
        </div>
        <div
          class="cursor-pointer px-4 py-2 text-sm text-gray-600 hover:bg-gray-50"
        >
          编辑当前账簿
        </div>
        <div
          class="cursor-pointer px-4 py-2 text-sm text-gray-600 hover:bg-gray-50"
        >
          栏账
        </div>
      </div>
    </div>

    <!-- 操作与筛选区 -->
    <div class="mb-6 rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
      <div class="flex items-center space-x-4">
        <!-- 日期选择 -->
        <div class="flex items-center space-x-2">
          <IconifyIcon icon="mdi:calendar" class="text-gray-500" />
          <DatePicker
            v-model:value="selectedDate"
            picker="month"
            format="YYYY-MM"
            placeholder="选择月份"
            class="w-32"
            @change="handleDateChange"
          />
        </div>

        <!-- 计提折旧按钮 -->
        <Button
          type="primary"
          size="middle"
          class="border-blue-600 bg-blue-600 hover:border-blue-700 hover:bg-blue-700"
          @click="handleDepreciation"
        >
          计提折旧
        </Button>

        <!-- 打印按钮 -->
        <Button
          size="middle"
          class="flex items-center space-x-1"
          @click="handlePrint"
        >
          <IconifyIcon icon="mdi:printer" />
          <span>打印</span>
        </Button>

        <!-- 导出按钮 -->
        <Button
          size="middle"
          class="flex items-center space-x-1"
          @click="handleExport"
        >
          <IconifyIcon icon="mdi:export" />
          <span>导出</span>
        </Button>
      </div>
    </div>

    <!-- 计提折旧表格 -->
    <div class="rounded-lg border border-gray-200 bg-white shadow-sm">
      <Table
        :columns="columns"
        :data-source="dataSource"
        :pagination="false"
        :scroll="{ x: 1000, y: 400 }"
        size="middle"
        bordered
        class="w-full"
      >
        <!-- 自定义表头样式 -->
        <template #headerCell="{ column }">
          <div class="font-medium text-gray-900">
            {{ column.title }}
          </div>
        </template>

        <!-- 自定义单元格样式 -->
        <template #bodyCell="{ column, record }">
          <div class="text-gray-700">
            {{ record[column.dataIndex] }}
          </div>
        </template>
      </Table>

      <!-- 合计行 -->
      <div class="border-t border-gray-200 bg-gray-50">
        <div class="flex">
          <div
            class="w-[120px] flex-none border-r border-gray-200 px-4 py-3 text-center font-medium text-gray-900"
          >
            合计
          </div>
          <div class="flex-1 px-4 py-3 text-center text-gray-500">
            <!-- 合计数据可以在这里添加 -->
          </div>
        </div>
      </div>
    </div>

    <!-- 页面底部信息 -->
    <div class="mt-6 text-center text-sm text-gray-500">
      <p>共 {{ dataSource.length }} 条记录</p>
    </div>
  </Page>
</template>

<style scoped>
/* 自定义样式 */
.ant-table-thead > tr > th {
  background-color: #f8fafc;
  border-bottom: 2px solid #e5e7eb;
  font-weight: 600;
  color: #374151;
}

.ant-table-tbody > tr > td {
  border-bottom: 1px solid #f3f4f6;
}

.ant-table-tbody > tr:hover > td {
  background-color: #f9fafb;
}

/* 日期选择器样式 */
.ant-picker {
  border-radius: 6px;
  border-color: #d1d5db;
}

.ant-picker:hover {
  border-color: #3b82f6;
}

.ant-picker-focused {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* 按钮样式 */
.ant-btn {
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.2s;
}

.ant-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
